import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Col, Layout, Row} from 'antd';
import './App.css';
import ContentList from "./componse/ContentList/ContentList";
import CardList from "./componse/CardList/CardList";
import WebHeader from "./componse/Header/WebHeader";
import {inject, observer} from "mobx-react";


@inject('blogStore')
@observer
export default class App extends Component {

    toast = () => {

    };

    constructor(props) {
        super(props)
        this.state = {
            width: props.width || -1,
            height: props.height || -1,
            cardWidth: 5
        }
        this.props.blogStore.updateCardWidth(5);
    }

    componentDidMount() {
        this.updateSize();
        window.addEventListener('resize', () => this.updateSize());
    }

    componentWillUnmount() {
        window.removeEventListener('resize', () => this.updateSize());
    }

    updateSize() {
        try {
            const parentDom = ReactDOM.findDOMNode(this).parentNode;
            let {width, height} = this.props;
            //如果props没有指定height和width就自适应
            if (!width) {
                width = parentDom.offsetWidth;
            }
            if (!height) {
                height = width * 0.38;
            }
            this.setState({width, height});
            if (width < 1400) {
                this.props.blogStore.updateCardWidth(0);
            } else {
                this.props.blogStore.updateCardWidth(5);
            }
        } catch (ignore) {
        }
    }


    render() {
        return (
            <div onClick={this.toast}>
                <WebHeader size={{width: this.state.width, height: this.state.height}}/>
                <div className="List">
                    <Layout>
                        <Row>
                            <Col span={24 - this.props.blogStore.cardWidth}>
                                <ContentList/>
                            </Col>
                            <Col span={this.props.blogStore.cardWidth}>
                                <CardList/>
                            </Col>
                        </Row>
                    </Layout>

                </div>
            </div>
        );
    }
};
